@extends('site.center.layouts.center_master')
@push('center_css')
    <link href="{{asset('/org/site')}}/css/orstyle.css" rel="stylesheet" type="text/css">
    <style>
        {{--你的样式不让我用,那我就自己手动写样式--}}
        .item-info {
            display: block;
            position: absolute;
            top: 0px;
            left: 0px;
        }
    </style>
@endpush
@section('content')
    <div class="col-main">
        <div class="main-wrap" style="background: white">

            <div class="user-orderinfo">

                <!--标题 -->
                <div class="am-cf am-padding">
                    <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">订单详情</strong> /
                        <small>Order&nbsp;details</small>
                    </div>
                </div>
                <hr>
                <!--进度条-->
                <div class="m-progress">
                    <div class="m-progress-list">
								<span class="step-1 step">
                                   <em class="u-progress-stage-bg"></em>
                                   <i class="u-stage-icon-inner">1<em class="bg"></em></i>
                                   <p class="stage-name">拍下商品</p>
                                </span>
                        <span class="step-2 step">
                                   <em class="u-progress-stage-bg"></em>
                                   <i class="u-stage-icon-inner">2<em class="bg"></em></i>
                                   <p class="stage-name">卖家发货</p>
                                </span>
                        <span class="step-3 step">
                                   <em class="u-progress-stage-bg"></em>
                                   <i class="u-stage-icon-inner">3<em class="bg"></em></i>
                                   <p class="stage-name">确认收货</p>
                                </span>
                        <span class="step-4 step">
                                   <em class="u-progress-stage-bg"></em>
                                   <i class="u-stage-icon-inner">4<em class="bg"></em></i>
                                   <p class="stage-name">交易完成</p>
                                </span>
                        <span class="u-progress-placeholder"></span>
                    </div>
                    <div class="u-progress-bar total-steps-2">
                        <div class="u-progress-bar-inner"></div>
                    </div>
                </div>
                <div class="order-infoaside">
                    @if(!in_array($vars->status,['未付款','已付款']) )
                    <div class="order-logistics">
                        <a href="logistics.html">
                            <div class="icon-log">
                                <i><img src="{{asset('/org/site')}}/images/receive.png"></i>
                            </div>
                        </a>
                        <div class="latest-logistics"><a href="logistics.html">
                                <p class="text">已签收,签收人是青年城签收，感谢使用天天快递，期待再次为您服务</p>
                                <div class="time-list">
                                    <span class="date">2015-12-19</span><span class="week">周六</span><span class="time">15:35:42</span>
                                </div>
                            </a>
                            <div class="inquire"><a href="logistics.html">
                                    <span class="package-detail">物流：天天快递</span>
                                    <span class="package-detail">快递单号: </span>
                                    <span class="package-number">373269427868</span>
                                </a><a href="logistics.html">查看</a>
                            </div>
                        </div>
                        <span class="am-icon-angle-right icon"></span>

                        <div class="clear"></div>
                    </div>
                    @endif
                    <div class="order-addresslist">
                        <div class="order-address">
                            <div class="icon-add">
                            </div>
                            <p class="new-tit new-p-re">
                                <span class="new-txt">
                                   收件人: {{$vars->address->name}}
                                </span>
                                <br>
                                <span class="new-txt-rd2">
                                   联系电话: {{$vars->address->phone}}
                                </span>
                            </p>
                            <div class="new-mu_l2a new-p-re">
                                <p class="new-mu_l2cw">
                                    <span class="title">收货地址：</span>
                                    <span class="area">
                                        {{$vars->address->area}}
                                    </span>
                                    <span class="street">{{$vars->address->detail}}</span></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="order-infomain">

                    <div class="order-top">
                        <div class="th th-item">
                            商品
                        </div>
                        <div class="th th-price">
                            单价
                        </div>
                        <div class="th th-number">
                            数量
                        </div>
                        <div class="th th-operation">
                            商品操作
                        </div>
                        <div class="th th-amount">
                            合计
                        </div>
                        <div class="th th-status">
                            交易状态
                        </div>
                        <div class="th th-change">
                            交易操作
                        </div>
                    </div>

                    <div class="order-main">

                        <div class="order-status3">
                            <div class="order-title">
                                <div class="dd-num">订单编号：
                                    <a href="javascript:;">
                                        {{$vars['order_num']}}
                                    </a>
                                </div>
                                <span>成交时间：{{$vars['created_at']->format('Y-m-d')}}</span>
                                <!--    <em>店铺：小桔灯</em>-->
                            </div>
                            <div class="order-content">
                                <div class="order-left">
                                    @foreach($vars->detail as $detail)
                                        <ul class="item-list">
                                            <li class="td td-item">
                                                <div class="item-pic">
                                                    <a href="{{route('site.detail',$detail->goods->id)}}"
                                                       class="J_MakePoint">
                                                        <img src="{{$detail->goods->pics[0]}}"
                                                             class="itempic J_ItemImg">
                                                    </a>
                                                </div>
                                                <div class="item-info">
                                                    <div class="item-basic-info">
                                                        <a href="javascript:;">
                                                            <p>{{$detail->goods->title}}</p>
                                                            <p class="info-little">
                                                                规格：{{$detail->product->attrs}}
                                                                <br>包装：统一包装 </p>
                                                        </a>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="td td-price">
                                                <div class="item-price">
                                                    {{$detail->price}}
                                                </div>
                                            </li>
                                            <li class="td td-number">
                                                <div class="item-number">
                                                    <span>×</span>
                                                    {{$detail->num}}
                                                </div>
                                            </li>
                                            <li class="td td-operation">
                                                <div class="item-operation">
                                                    <a href="javascript:;">退款</a>
                                                    <span>/</span>
                                                    <a href="javascript:;">退货</a>
                                                </div>
                                            </li>
                                        </ul>
                                    @endforeach
                                </div>
                                <div class="order-right">
                                    <li class="td td-amount">
                                        <div class="item-amount">
                                            合计：{{$vars->totalprice}}
                                            <p>含运费：<span>0.00</span></p>
                                        </div>
                                    </li>
                                    <div class="move-right">
                                        <li class="td td-status">
                                            <div class="item-status">
                                                <p class="Mystatus">
                                                    {{$vars->status}}
                                                </p>
                                                @if($vars->status == "已发货")
                                                    <p class="order-info">
                                                        <a href="logistics.html">
                                                            查看物流
                                                        </a>
                                                    </p>
                                                @endif
                                            </div>
                                        </li>
                                        <li class="td td-change">
                                            <div class="am-btn am-btn-danger anniu">
                                                @if($vars->status == "未付款")
                                                    立即支付
                                                @else
                                                    确认收货
                                                @endif
                                            </div>
                                        </li>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!--公共底部-->
        @include('site.layouts._bottom')
    </div>
@endsection
@push('center_js')
    <script src="{{asset('/org/site')}}/AmazeUI-2.4.2/assets/js/jquery.min.js"></script>
    <script src="{{asset('/org/site')}}/AmazeUI-2.4.2/assets/js/amazeui.js"></script>
@endpush
